<ion-view view-title="ORDER DETAIL">
    <ion-nav-buttons side="left">
        <a class="button icon-left ion-chevron-left button-clear button-dark" ng-click="goBack()">
            Back
        </a>
    </ion-nav-buttons>
    <ion-content>
        <div style="text-align: center;margin-top:10px;">
            <div>
                {{order.store_name}} {{order.increment_id}} ({{order.total_qty_ordered | number : 0}} item<span ng-if="order.total_qty_ordered>1">s</span>)
            </div>
            <div>{{order.address.firstname}} {{order.address.lastname}} {{order.address.telephone}}</div>
        </div>

        <ion-list class="list" show-delete="false"
                  can-swipe="true">
            <ion-item class="item" ng-repeat="good in order.goods" ng-class="{'item-balanced':good.item_status == 'pick_up','item-assertive':good.item_status == 'out_of_stock','item-energized':good.item_status == 'substitute'}" style="padding:0px" href="#/item-detail/{{good.item_id}}">
                <div class="row" style="width: 100%;word-wrap:break-word;word-break:normal;">
                    <div class="col col-30">
                        <img ng-src="{{good.image}}" class="col col-30">
                    </div>
                    <div class="col col-50 custom-word" >
                        <div>{{good.name}}</div>
                        <div>LOC:{{good.location}}</div>
                        <div>SUB:{{good.substitute}}</div>
                        <div>UPC:{{good.sku}}</div>
                    </div>
                    <div class="col col-21 custom-word">
                        <div> × {{good.qty_ordered | number:0}}</div>
                        <div>${{good.price | number:2}}</div>
                        <div><del>${{good.store_price}}</del></div>
                        <div>{{good.quantity}}</div>
                    </div>
                </div>

                <!--<ion-option-button class="button-positive"
                                   ng-click="showMsg('action1')">
                    action1
                </ion-option-button>
                <ion-option-button class="button-info"
                                   ng-click="showMsg('action2')">
                    action2
                </ion-option-button>-->
            </ion-item>
            <ion-item class="item">
                <h3>Price</h3>
                <div>Subtotal:&nbsp;${{order.subtotal | number:2}}</div>
                <div>Shipping & Handling:&nbsp; ${{order.shipping_amount | number:2}}</div>
                <div>Tips:&nbsp;${{order.tips | number:2}}</div>
                <div>Original Tax:&nbsp;${{original_tax | number:2}}</div>
                <div>Original Grand Total:&nbsp;${{original_grand_total | number:2}}</div>
                <br>
                <div>Out of tock:&nbsp;${{out_of_stock | number:2}}</div>
                <div>Substitute:&nbsp;${{substitute | number:2}}</div>
                <div>Tax:&nbsp;${{tax | number:2}}</div>
                <div>Grand Total:&nbsp;${{ total | number:2}}</div>
                <br>
                <div>Total Adjustment:&nbsp;${{ change | number:2}}</div>

            </ion-item>
            <a type="button" value="Mark as complete" ng-click="completeOrder(order.order_id)" ng-if="order.order_completed == 0"  class=" button button-balanced button-full " width="100%">Mark as complete</a>
            <a type="button" value="Delivered" ng-click="deliveredOrder(order.order_id)" ng-if="order.status == 'in_transit'"  class=" button button-balanced button-full " width="100%">Delivered</a>

        </ion-list>
    </ion-content>
</ion-view>